<template>
	<view class="course-item" :class="{column: isColumn}" @click="jsopxiangq(item)">
		<view class="item-left">
			<image class="course-img" :src="item.mainImage" lazy-load></image>
			<!-- 时长 00:59:59 -->
			<view class="course-time">
				{{ item.totalTime }}
			</view>
		</view>
		<view class="item-right column">
			<view class="title">{{item.title}}</view>
			<view class="info">
				<view class="nickname iconfont icon-laoshi2">{{ item.nickName }}</view>
				<view class="count">
					<view v-if="item.isFree" class="money">免费</view>
					<!-- 如果有优惠价显示优惠价，否则原价 -->
					<view v-else class="money iconfont icon-moneybag">{{ item.priceDiscount 
|| item.priceOriginal}}</view>
					<view class="iconfont icon-video">{{ item.studyTotal }} 人在学 </view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		props: {
			isColumn: { //是否图片与文字描述纵向排列（false 默认横向，true 纵向）
				type: Boolean,
				default: false
			},
			item: {
				type: Object,
				default: () => ({ // 默认值是对象，必须是小括号将对象括起来。
					id: 1,
					mainImage: 'http://10.idqqimg.com/qqcourse_logo_ng/ajNVdqHZLLAWb3qFGBhykjmcTvz9CWmwib2Qj7c3Vxjia4y5fgSoNdrMYIdH11Dl1OCraibA7u0mts / 600 ',
					totalTime: '00:59:08',
					title: 'SpringBoot项目实战教程SpringCloud OAuth2 Vue分布式微服务架构',
					nickName: '梦老师1', // 课程老师
					isFree: 0, //是否免费：0收费，1免费
					priceOriginal: 999, // 原价
					priceDiscount: 699.9, // 优惠价
					studyTotal: 899
				})
			}
		},
		methods: {
			jsopxiangq(item) {
				uni.navigateTo({
					url: `/pages/course/course-details?id=${item.id}`
				});
			}
		},
	}
</script>
<style lang="scss">
	.course-item {
		// 默认横向布局
		display: flex;
		// 纵向布局
		// flex-direction: column;
		width: 100%;
		padding: 20rpx 0;
		border-bottom: 1rpx solid #F1F1F1;

		.item-left {
			// 针对图上时长
			position: relative;
			width: 290rpx;
			height: 160rpx;
			margin-right: 20rpx;

			.course-img {
				width: 290rpx;
				height: 160rpx;
				border-radius: 10rpx;
			}

			// 时长
			.course-time {
				position: absolute;
				background: rgba(51, 51, 51, 0.4);
				color: #FFFFFF;
				font-size: 22rpx;
				border-radius: 20rpx;
				bottom: 5rpx;
				right: 5rpx;
				padding: 0 6rpx;
			}
		}

		.item-right {
			justify-content: space-between;
			height: 160rpx;
			padding-top: 5rpx;
			padding-left: 5rpx;

			.title {
				max-width: 365rpx;
				height: 70rpx;
				line-height: 35rpx;
				font-size: 28rpx;
				font-weight: bold;
				// 显示两行，超出部分用...代替
				overflow: hidden; // 超出隐藏
				text-overflow: ellipsis; //超出部分显示省略号
				-webkit-line-clamp: 2; //设置显示的行数
				display: -webkit-box; // 将对象作为弹性伸缩盒子模型显示
				-webkit-box-orient: vertical; // 设置或检索伸缩盒对象的子元素的排列方式 纵向
				white-space: normal; // 空白会被浏览器忽略
			}

			.info {
				.nickname {
					font-size: 23rpx;
					color: #999;
				}

				.count {
					display: flex;
					align-items: center;

					.iconfont {
						font-size: 23rpx;
						color: #222222;
					}

					.money {
						width: 130rpx;
						color: #fb6e39;
						font-size: 28rpx;
						padding-right: 30rpx;
						align-self: flex-end;
					}
				}
			}
		}
	}
</style>
